// createRouter 创建路由实例
// createWebHistory 创建history模式路由。（hash/history）
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'  // Vue 单文件组件（SFC）会默认导出一个组件
import Layout from '@/views/Layout/index.vue'
import Category from '@/views/Category/index.vue'
import Home from '@/views/Home/index.vue'
import SubCategory from '@/views/SubCategory/index.vue'
import Detail from '@/views/Detail/index.vue'
// 引入初始化样式文件
import '@/styles/common.scss'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // routes用来配置 path -> component
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '', // 置空，表示渲染父path的时候也会渲染该path
          component: Home
        },
        {
          path: 'category/:id', // 访问'/category'会渲染这个，而不是其他子路由 ； 需要传一个id
          component: Category
        },
        {
          path: 'category/sub/:id', 
          component: SubCategory
        },
        {
          path: 'detail/:id', 
          component: Detail
        }
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {

    },
  ],
  // 配置路由滚动行为
  scrollBehavior() {
    return { top: 0 }
  }
})

export default router // 导出给main.js使用
